<template>
	<view>
		<view class="between center bg pad-10">
			<view class="flex-start">
				<u-avatar mode="square" src="/static/images/patient/nan.jpg"></u-avatar>
				<view class="align-between mar-0-5">
					<view>{{userInfo.name}}</view>
					<view>就诊卡：{{userInfo.patId}}</view>
				</view>
			</view>
			<view class="text-center" @click="toCardListPage">
				<view>
					<image class="img-patient" src="/static/images/patient/jiuzhengren.png"></image>
				</view>
				<view class="color-blue font-size-10">切换就诊人</view>
			</view>
		</view>
		<view class="bg-white mar-10 pad-10">
			<view class="title-border mar-10-0">服务进程</view>
			<view class="pad-10-0 process">
				<view class="flex-start " v-for="(item,index) in list">
					<view class="left">
						<view class="">
							<view>
								<view :class="item.type">
									<view>{{item.date}}</view>
									<view>{{item.time}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="middle">
						<view v-if="index==0" class="node-one"></view>
						<view v-else-if="index==(list.length-1)" class="node-last"></view>
						<view v-else class="node"></view>
					</view>
					<view class="right">
						<view class="flex-start center name">
							<view class=" over">{{item.name}}</view>
							<image v-if="item.type=='done'" class="img" src="/static/images/imgs/已完成.png"></image>
							<image v-if="item.type=='active'" class="img" src="/static/images/imgs/正在做.png"></image>
							<image v-if="item.type==''" class="img" src="/static/images/imgs/还未到.png"></image>
						</view>
						<view class="between pad-10" v-for="child in item.item">
							<view>{{child.name}}</view>
							<view>{{child.address}}</view>
							<view class="center" v-if="child.map">
								<image class="img-map" src="/static/images/imgs/导航.png"></image>
								{{child.map}}
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'

	export default {
		computed: {
			...mapGetters(['userInfo', 'userList']),
		},
		data() {
			return {
				list: [{
						date: "2025-03-03",
						time: "20:10:10",
						type: 'done',
						name: "已挂号",
						item: [{
							name: "已挂号",
							address: "门诊楼二楼305",
							map: '导航',
						}, ]
					}, {
						date: "2025-03-03",
						time: "20:10:10",
						type: 'active',
						name: "签到",
						item: [{
							name: "去签到照X光",
							address: "门诊楼一楼15",
							map: '导航',
						}, {
							name: "去签到抽血",
							address: "门诊楼一楼105",
							map: '导航',
						}, ]
					}, {
						date: " ",
						time: " ",
						type: '',
						name: "去缴费",
						item: [{
							name: "去缴费",
							address: "门诊大厅",
							map: '导航',
						}, ]
					},
					{
						date: " ",
						time: " ",
						type: '',
						name: "回诊",
						item: [{
							name: "去回诊",
							address: "门诊楼二楼305",
							map: '导航',
						}, ]
					},
					{
						date: "",
						time: "",
						type: '',
						name: "完成",
						item: [{

						}, ]
					}
				],
			}
		},
		mounted() {

		},
		methods: {

			toCardListPage() {
				uni.navigateTo({
					url: '/pages/Login/patientCardList'
				})
			},
		}
	}
</script>

<style scoped>
	.bg {
		background-color: rgb(187, 211, 255);
		height: 80px;
	}

	/* 切换就诊人 */
	.img-patient {
		height: 30px;
		width: 30px;
	}



	.title-border {
		padding: 0 5px;
		border-left: 3px solid blue;
	}

	.process {
		height: calc(100% - 150px);
		overflow-y: auto;

		.left {
			width: 90px;
			text-align: left;
		}

		.middle {
			position: relative;
			width: 20px;

			.node-one {
				margin: 0 10px;
				border-left: 1px solid blue;
				height: calc(100% - 20px);
				position: absolute;
				bottom: 0;
			}

			.node-last {
				margin: 0 10px;
				border-left: 1px solid blue;
				height: 20px;
				position: absolute;
			}

			.node {
				margin: 0 10px;
				border-left: 1px solid blue;
				height: 100%;
			}
		}




		.right {
			padding: 0 0 0 10px;
			flex: 1;

			.name {
				position: relative;
				border-radius: 5px;
				background-color: rgb(236, 243, 255);
				padding: 20rpx;

				.img {
					height: 20px;
					width: 20px;
					position: absolute;
					left: -29px;
					border-radius: 45px;
				}

			}

			.img-map {
				width: 15px;
				height: 15px;
				margin: 0 3px;
			}
		}
	}
</style>